<!--
*@Author: QWP
*@Description: 展示列表
*@Date: 2023-06-18 12:29:19
-->
<template>
  <Table
    ref="tabRef"
    :data-source="data"
    size="middle"
    :bordered="$attrs['bordered'] || false"
    :pagination="pagination1"
    :rowKey="rowKey"
    :customRow="rowProperties"
    :rowSelection="$attrs['rowSelection'] ?? rowSelection"
    v-bind="$attrs"
    :scroll="{ y: '200px' }"
    @change="tabChange"
    @resizeColumn="handleResizeColumn"
    v-if="refresh"
    class='u-common-table u-common-table-scroll'>
  </Table>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-table'
})
import { Table } from "ant-design-vue";
import { ref, reactive, onMounted, watch, nextTick, useAttrs, isRef } from 'vue' 
import type { TableColumnsType } from 'ant-design-vue';
import { numberC } from '@/util/common'

interface Props {
  data: any[],
  rowKey?: string | Function,
  pagination?: object | boolean
}
const props = withDefaults(defineProps<Props>(), {
  pagination: { pageSize: 50 },
  rowKey: 'keyid'
})

const attrs = useAttrs()
const emits = defineEmits(['onSelect', 'onDblclick', 'change', 'update:pagination'])

let pagination1 = ref<any>(props.pagination == false ? false : {})

const refresh = ref<boolean>(true)

const rowSelection = ref({
  onChange: (selectedRowKeys, selectedRows) => {
    emits('onSelect', { selectedRows, selectedRowKeys })
  },
});

const tabRef = ref(null);

function rowProperties(record, index) {
  return {
    record,
    onDblclick: (event) => {
      emits('onDblclick', record)
    },
  };
}

// 表格的分页、排序、筛选变化时触发
function tabChange(pagination, filters, sorter, { action, currentDataSource }) {
  let tPageNation = pagination;
  tPageNation.showTotal = total => `共 ${total} 条`
  emits('update:pagination', tPageNation)
  emits('change', tPageNation, filters, sorter, { action, currentDataSource })
}

function handleResizeColumn(w, col) {
  col.width = w;
}

watch(() => props.data, (nval, oval) => {
  emits('onSelect', { selectedRows: [], selectedRowKeys: [] })
  refresh.value = false;
  nextTick(() => refresh.value = true)
}, { deep: true })

watch(() => props.pagination, (nval, oval) => {
  let tVal = (nval || {})
  pagination1.value = {
    ...tVal,
    total: numberC(tVal['total'])
  }
}, { deep: true })

defineExpose({
  tabRef
})
</script>

<style lang='scss'>
.u-common-table {
  .ant-table-middle {
    font-size: 14px !important;
    .ant-table-tbody {
      .ant-table-cell {
        .ant-btn-link {
          font-size: 14px !important;
        }
      }
    }
  }
  .ant-table-thead {
    .ant-table-cell {
      background: #F2F2F2;
      border-color: #D9D9D9
    }
  }
}
.u-common-table-scroll {
  height: 100%;
  .ant-spin-nested-loading {
    height: 100%;
    .ant-spin-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      .ant-table {
        display: block;
        flex: 1;
        overflow: hidden;
        .ant-table-container {
          height: 100%;
          display: flex;
          flex-direction: column;
          .ant-table-body {
            max-height: unset !important;
            display: block;
            flex: 1;
          }
        }
      }
    }
  }
}
</style>